<template>
  <div>
    <puplic-modal
      width="1200px"
      :footer="false"
      :title="title"
      :publicVisible="publicVisible"
      @handleOk="handleOk"
      @cancel="handleOk"
    >
      <div slot="content">
        <div class="content-wrap">
          <div class="header flex">
            <img src="@/assets/imgs/event/icon.png" alt="" />
            <div class="header-right flex column justify-around">
              <div class="restaurant-name">{{ pageRecords.restaurantName }}-{{ ' ' + pageRecords.deviceName }}</div>
              <div class="mn">
                MN码:
                <span class="MN-number">{{ pageRecords.deviceMonitorMn }}</span>
              </div>
            </div>
          </div>
          <div class="detail-info">
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">所属餐厅：</div>
                <div class="detail-info-value">{{ pageRecords.restaurantName }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">所属街道：</div>
                <div class="detail-info-value">{{ pageRecords.regionName }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">监管单位：</div>
                <div class="detail-info-value">{{ pageRecords.unitName }}</div>
              </div>
            </div>
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">餐厅规模：</div>
                <div class="detail-info-value">
                  {{ pageRecords.restaurantScale == 1 ? '小型' : pageRecords.restaurantScale == 2 ? '中型' : '大型' }}
                </div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">餐厅负责人：</div>
                <div class="detail-info-value">{{ pageRecords.restaurantChargeName }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">负责人电话：</div>
                <div class="detail-info-value">{{ pageRecords.restaurantChargePhone }}</div>
              </div>
            </div>
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">清洗周期：</div>
                <div class="detail-info-value">{{ pageRecords.restaurantCleanCycle + '天' }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">最近一次清洗时间：</div>
                <div class="detail-info-value">
                  {{ pageRecords.cleanTime ? pageRecords.cleanTime.split(' ')[0] : '' }}
                </div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">清洗倒计时：</div>
                <div class="detail-info-value" v-if="pageRecords.downCleanDay > 0">
                  {{ pageRecords.downCleanDay }}天
                </div>
                <div class="detail-info-value" v-else style="color: #ff517b">
                  逾期{{ pageRecords.downCleanDay * -1 }}天
                </div>
              </div>
            </div>
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">营业地址：</div>
                <div class="detail-info-value">{{ pageRecords.restaurantAddress }}</div>
              </div>
            </div>
          </div>

          <div class="detail-info">
            <div class="alter-container flex align-center">
              <div v-if="pageRecords.type == 1">
                <img src="@/assets/imgs/event/ewarming.png" alt="" />
                <span>预警详情</span>
              </div>

              <div v-else-if="pageRecords.type == 2">
                <img src="@/assets/imgs/event/warming.png" alt="" />
                <span style="color: #ff517b">告警详情</span>
              </div>

              <div v-else-if="pageRecords.type == 3">
                <img src="@/assets/imgs/event/offline.png" alt="" />
                <span style="color: #06d6db">离线详情</span>
              </div>
            </div>

            <div class="detail-info" v-if="pageRecords.type != 3">
              <div class="detail-info-common flex">
                <div class="f1 flex">
                  <div class="detail-info-lable" v-if="pageRecords.type == 1">预警时间:</div>
                  <div class="detail-info-lable" v-else-if="pageRecords.type == 2">告警时间:</div>
                  <div class="detail-info-value">{{ pageRecords.alarmTime }}</div>
                </div>
                <div class="f1 flex">
                  <div class="detail-info-lable">排风机状态:</div>
                  <div class="detail-info-value">{{ pageRecords.fanStatus == 1 ? '开启' : '关闭' }}</div>
                </div>
                <div class="f1 flex">
                  <div class="detail-info-lable">净化器状态：</div>
                  <div class="detail-info-value">{{ pageRecords.purifyStatus == 1 ? '开启' : '关闭' }}</div>
                </div>
              </div>
              <div class="detail-info-common flex">
                <div class="f1 flex">
                  <div class="detail-info-lable">油烟浓度:</div>
                  <div
                    class="detail-info-value"
                    :class="
                      pageRecords.thickSmokeType == 1
                        ? ''
                        : pageRecords.thickSmokeType == 2
                        ? 'ewarming-color'
                        : 'warming-color'
                    "
                  >
                    {{ pageRecords.thickSmoke }} mg/m³
                  </div>
                </div>
                <div class="f1 flex">
                  <div class="detail-info-lable">颗粒物浓度:</div>
                  <div
                    class="detail-info-value"
                    :class="
                      pageRecords.particleHazeType == 1
                        ? ''
                        : pageRecords.particleHazeType == 2
                        ? 'ewarming-color'
                        : 'warming-color'
                    "
                  >
                    {{ pageRecords.particleHaze }} mg/m³
                  </div>
                </div>
                <div class="f1 flex">
                  <div class="detail-info-lable">非甲烷总烃浓度：</div>
                  <div
                    class="detail-info-value"
                    :class="
                      pageRecords.nonMethaneType == 1
                        ? ''
                        : pageRecords.nonMethaneType == 2
                        ? 'ewarming-color'
                        : 'warming-color'
                    "
                  >
                    {{ pageRecords.nonMethane }} mg/m³
                  </div>
                </div>
              </div>
            </div>

            <div v-else>
              <div class="detail-info-common flex">
                <div class="f1 flex">
                  <div class="detail-info-lable">离线时间:</div>
                  <div class="detail-info-value">{{ pageRecords.alarmTime }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </puplic-modal>
  </div>
</template>
<script>
import puplicModal from '@/components/publicModal'
export default {
  components: { puplicModal },
  name: 'detailModal',
  data() {
    return {
      publicVisible: false,
      pageRecords: {},
      records: {},
      title: '',
    }
  },

  methods: {
    show(records) {
      this.title = '事件管理-'
      // console.log(records, 'records')
      this.publicVisible = true
      this.pageRecords = records
      if (this.pageRecords.type == 1) {
        this.title += '预警详情页'
      } else if (this.pageRecords.type == 2) {
        this.title += '告警详情页'
      } else {
        this.title += '离线详情页'
      }
    },

    handleOk() {
      this.publicVisible = false
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 0 0;
}
.content-wrap {
  width: 1200px;
  height: 90%;
  margin: 0 auto;
  overflow: hidden;
  background: #024c4e;
  padding: 40px 50px;

  .header {
    padding-bottom: 20px;
    border-bottom: 2px solid #05585a;
    margin-bottom: 20px;
    .header-right {
      margin-left: 5px;
    }
    .restaurant-name {
      font-size: 18px;
      line-height: 18px;
      font-weight: 500;
      color: #85fcff;
    }
    .mn {
      font-size: 14px;
      font-weight: 400;
      color: #06d6db;
      line-height: 14px;
    }
  }

  .alter-container {
    height: 40px;
    margin-left: 60px;
    margin-bottom: 20px;
    padding-left: 14px;
    background: #03585b;

    font-size: 14px;
    font-weight: 500;
    color: #deef35;
    span {
      margin-left: 5px;
    }
  }

  .detail-info-common {
    padding-left: 60px;
    font-size: 14px;
    font-weight: 400;
    color: #02c1c7;
    margin-bottom: 20px;
    .detail-info-value {
      color: #9cfdff;
      margin-left: 5px;
    }
  }

  .ewarming-color {
    color: #e6ee39 !important;
  }

  .warming-color {
    color: #f95672 !important;
  }
}
</style>
